<template>
   <HomePanel ref="target" title="新鲜好物" subTitle="新鲜出炉 品质靠谱">
       <template #right>
           <XtxMore/>
       </template>
     <!-- <ul ref="pannel" class="goods-list">
        <li v-for="item in prdList" :key="item.id">
          <RouterLink to="/">
            <img :src="item.picture" alt="" />
            <p class="name">{{ item.name }}</p>
            <p class="price">&yen;{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul> -->
    <HomePrice :priceList="prdList"/>
   </HomePanel>
</template>

<script>
import HomePanel from './home-panel.vue'
import { findNew } from '@/api/home'
import { ref } from 'vue'
import HomePrice from './home-price.vue'
import { useObserver } from '@/hooks/index'
export default {
  name: 'xtxHomeNew',
  components: {
    HomePanel,
    HomePrice
  },
  setup () {
    const prdList = ref([])
    const getPrdList = async () => {
      const { result } = await findNew()
      prdList.value = result
    }
    // onMounted(() => {
    //   getPrdList()
    // })

    const { target } = useObserver(getPrdList)
    return { prdList, target }
  }
}
</script>

<style scoped lang='less'>
</style>
